<template>
	<view>
		<view class="attbox">
			<image class="juan" src="../../static/imges/zuo.png" mode="" @click="login"></image>
			<view class="title">
				个人资料
			</view>
			<view style="position: relative;right: 20rpx;" v-show="isShow" @click="isShow=false">
				编辑
			</view>
			<view style="position: relative;right: 20rpx;" v-show="!isShow" @click="updata">
				确定
			</view>
		</view>
		<view class="demoList">
			<view class="banter">
				<view class="botteer">
					<view class="bold">
						我的头像
					</view>
					<view class="box4" v-show="isShow">
						<view class="booor">
							<image class="buan" :src="userInfo.portrait" mode=""></image>
						</view>
						<!-- <image class="hljs-selector-pseudo" v-show="!guan" src="../../static/imges/you.png" mode=""></image> -->
					</view>
					<!-- <view class="box4" v-show="!guan">
						<view class="booor">
							<cropper selWidth="300" selHeight="300" @upload="myUpload" :avatarSrc="imgurl" avatarStyle="width:100rpx;height:100rpx;border-radius: 50%;"
							 class="imgter">
							</cropper>
						</view>
						<image class="hljs-selector-pseudo" v-show="!guan" src="../../static/imges/you.png" mode=""></image>
					</view> -->
				</view>
			</view>
			<view class="banter">
				<view class="botteer">
					<view class="bold">
						手机号码
					</view>
					<view style="display: flex;" v-show="isShow">
						<view class="box5" style="color: #000000;">
							{{userInfo.Telephone}}
						</view>
					</view>
					<view style="display: flex;" v-show="!isShow">
						<input type="number" maxlength="11" class="fuan" value="" placeholder="请修改您的手机号" v-model="telephone"/>
					</view>
				</view>
			</view>

			<view class="banter">
				<view class="botteer">
					<view class="bold">
						昵称
					</view>
					<view style="display: flex;" v-show="isShow">
						<view class="box5" style="color: #000000;">
							{{userInfo.name}}
						</view>
					</view>
					<view style="display: flex;" v-show="!isShow">
						<input type="text" class="fuan" maxlength="8" value="" placeholder="请修改您的昵称" v-model="name"/>
					</view>
				</view>
			</view>
		</view>
		<view class="box0" v-show="isShow" @click="toLogin">
			退出登录
		</view>
	</view>
</template>

<script>
	import cropper from "../../components/lxiaoxiao-cropper/lxiaoxiao-cropper.vue"
	import instance from "../../api/requset.js"
	export default {
		components: {
			cropper
		},
		data() {
			return {
				isShow: true,
				imgurl: "../../static/imges/tx.png",
				userId:null,
				userInfo:{},
				name:"",//用户名称
				portrait:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2583035764,1571388243&fm=26&gp=0.jpg',//用户头像
				telephone:''//用户电话
			};
		},
		computed: {

		},
		onLoad() {
			var that = this
			uni.getStorage({
			    key: 'id',
			    success: function (res) {
					that.userId = res.data
			    }
			});
			var serverUrl = instance.serverUrl
			uni.request({
				url: serverUrl + '/index.php/api/Member/index', //仅为示例，并非真实接口地址。
				data: {
					userid: this.userId
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				method: 'POST',
				success: (res) => {
					console.log("用户信",res.data.data.user[0])
					this.userInfo = res.data.data.user[0]
				}
			});
		},
		methods: {
			updata(){
				var serverUrl = instance.serverUrl
				this.isShow=true
				this.userInfo.Telephone = this.telephone
				this.userInfo.name = this.name
				uni.request({
					url: serverUrl + '/index.php/api/Member/personal?id=1', //仅为示例，并非真实接口地址。
					data: {
						name:this.name,
						portrait:this.portrait,
						telephone:this.telephone
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					success: (res) => {
						console.log("修改用户信息",res)
				
					}
				});
			},
			toLogin(){
				uni.removeStorage({
				    key: 'id',
				    success: function (res) {
				        console.log('success');
				    }
				});
				try {
				    uni.removeStorageSync('userId');
				} catch (e) {
				    // error
				}
				uni.navigateTo({
					 url: '/pages/Login/Login'
				})
			},
			login() {
				uni.switchTab({
					url: './My'
				});
			},
			fifler() {
				// this.guan = !this.guan
			},
			myUpload(rsp) {
				const self = this;
				self.imgurl = rsp.path; //更新头像方式一
				// rsp.avatar.imgSrc = rsp.path; //更新头像方式二
			},
			getmi(){
				
			}
		}
	};
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;
	}

	.attbox {
		display: flex;
		width: 100%;
		height: 200rpx;
		line-height: 250rpx;
		justify-content: space-between;
		background-color: #FFFFFF;
	}

	.banter {
		width: 100%;
		height: 130rpx;
		border-bottom: 2rpx solid #F6F6F6;
	}

	.botteer {
		display: flex;
		justify-content: space-between;
		margin-right: 10rpx;
	}

	.box4 {
		display: flex;
	}

	.booor {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		border: 1rpx #ccc solid;
		margin-top: 20rpx;
		margin-right: 10rpx;
	}

	.boot {
		width: 100rpx;
		border-radius: 50%;
		height: 100rpx;
		margin-right: 30rpx;
	}

	.bold {
		line-height: 130rpx;
		margin-left: 30rpx;
	}

	.box5 {
		line-height: 140rpx;
		color: #ccc;
		margin-right: 30rpx;
	}

	.juan {
		width: 40rpx;
		height: 40rpx;
		position: relative;
		top: 110rpx;
		left: 20rpx;
	}

	.demoList {
		width: 95%;
		height: 410rpx;
		margin-left: 2.5%;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.buan{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.box0 {
		width: 80%;
		margin-left: 10%;
		margin-top: 300rpx;
		border-radius: 20rpx;
		height: 80rpx;
		text-align: center;
		color: #fff;
		line-height: 80rpx;
		font-size: 30rpx;
		background-color: #0958A9;
	}

	.hljs-selector-pseudo {
		width: 40rpx;
		height: 40rpx;
		margin-top: 50rpx;
	}
	.fuan{
		margin-top: 45rpx;
		width: 250rpx;
	}
</style>
